<!DOCTYPE html>
<html>
<head>
  <title>图书列表</title>
  <link rel="stylesheet" href="/css/iconfont.css">
  <link rel="stylesheet" href="/css/booklist.css">
</head>
<body>
<!-- 自写的图书列表 -->
    <div class="booklist-html">
        <div>
            <h1 class="listnav">删查图书列表</h1>
            <h1 class="addlist">
                <a href="/booklist/search"><span class="iconfont icon-sousuo"></span></a>
                <a href="/booklist/create"><span class="iconfont icon-tianjia"></span></a>
                <a href="/logout"><span class="iconfont icon-wode"></span></a>
            </h1>
        </div>
        

        <table>
            <tr class="booklist-head">
                <th clss='bookname'>书名</th>
                <th class="pressdata">日期</th>
                <th class="classify">类别</th>
                <th class="account">价格(元)</th>
                <th class="describe">简介</th>
                <th class="delete">删除</th>
            </tr>
        </table>

        <!-- 列表渲染 -->
        <% booklists.forEach(item =>{ %>
        <table class="list-book-table">
            <tr class="list-book 
                <%= item.type=== 1 ?'letterature':(
                    item.type=== 2 ?'history':(
                        item.type=== 3 ?'culture':(
                            item.type=== 4 ?'life':'science'
                            )
                        )
                    )
                %>
            ">
                <td class="bookname"><a href="https://baike.baidu.com/item/<%= item.title %>"><%= item.title %></a></td>
                <td class="pressdata"><%= moment(item.time).format('YYYY-MM-DD') %></td>
                <td class="classify">
                    <%= item.type=== 1 ?'文学类':(
                            item.type=== 2 ?'历史类':(
                                item.type=== 3 ?'文化类':(
                                    item.type=== 4 ?'生活类':'科学类'
                                )
                            )
                        )
                     %>
                </td>
                <td class="account"><%= item.account %></td>
                <td class="describe"><%= item.remarks %></td>
                <td class="deletebook">
                    <button class="<%= item.type=== 1 ?'letterature':(
                                    item.type=== 2 ?'history':(
                                        item.type=== 3 ?'culture':(
                                            item.type=== 4 ?'life':'science'
                                            )
                                        )
                                    )
                                %>" 
                            type="button" 
                            value=""><a class="delBtn" href="/booklist/<%= item._id %>">x</a></button>
                </td>
            </tr>
        </table>
        <% })%>
    </div>
</body>
<script>
    //获取所有的 delBtn
    let delBtns = document.querySelectorAll('.delBtn');
  
    //绑定事件
    delBtns.forEach(item => {
      item.addEventListener('click', function (e) {
        if (confirm('您确定要删除该书籍吗?')) {
          return true;
        } else {
          //阻止默认行为
          e.preventDefault();
        }
      });
    })
  </script>
</html>